
<template>
    <div class="tabImgCon" :id="tab1" :style="{'height':height,'width':width}">
      <div class="imgShowA" :id="tab2">
        <img :src="url"  onload="pointImg()"/>
        <div class="dot" v-for="(item,index) in  pointList" :style="{'left':(item.left || 0)+'px','top':(item.top || 0)+'px'}" :key="index" @click="pointClick(item)">{{index+1}}</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'MapShow',
  data () {
      return {
        tab1: '',
        tab2: '',
      }
  },
  props: {
      url:{
        type:String,
        default:()=>{
          return 'http://autobuild.jiguantong.com:8087/safety/system/download?fileUrl=2019-10-17/QQ浏览器截图20190416140613.png';
        }
      },
      pointList:{
        type:Array,
        default:()=>{
          return []
        }
      },
      height:{
        type:String,
        default:'100px'
      },
      width:{
        type:String,
        default:'100px'
      },
      pointCb:{
        type:Function,
        default:()=>{}
      },
    },
    created(){
      this.tab1 = this.$A.getUUID()
      this.tab2 = this.$A.getUUID()
      window.pointImg = this.pointImg
    },
    methods:{
      pointImg(){
        let ele = document.getElementById(this.tab1)
        let levelheight = 600;
        let levelwidth = 900;
        let width = ele.clientWidth;
        let height = ele.clientHeight;
        let rate = Math.min(height / levelheight, width / levelwidth);
        let bosscon = document.getElementById(this.tab2);
        bosscon.style.transform = `translate(-50%, -50%) scale(${rate})`;
      },
      pointClick(params){
        this.pointCb && this.pointCb(params)
      }
  }
}
</script>

<style lang="scss" scoped>
 .tabImgCon{
    height:300px;
    width:400px;
    position:relative;
    .dotTab{
      height:40px;
      width:50px;
      border: 1px solid #ddd;
      float:left;
      line-height:40px;
      text-align: center;
    }
    .imgShowA{
      position:absolute;
      width:900px;
      height:600px;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      border:1px solid #ddd;
      .dot{
        height:30px;
        width:30px;
        border-radius:50%;
        position:absolute;
        background-color: #1890ff;
        cursor:pointer;
        top:0;
        left:0;
        font-size:16px;
        text-align:center;
        line-height:30px;
        color:#fff;
      }
      img{
        height:100%;
        width:100%;
      }
    }
  }
</style>
